<%layout("/common/_layout.html"){ %>
<script type="text/javascript">
	function getChartsData(){
        var  base = "${base}";
        var param = {"api":$("#api_option").val(),"time_start":$("#time_start").val(),"time_end":$("#time_end").val()};
        $.ajax({
            url : base + '/apiLog/getChartsData',
            data : param,
            dataType : "json",
            success : function(data) {
                console.info(data);
                showData(data.data);
                showHighcharts(param.api,data.chart);
            }
        });
	}

	function showData(data) {
		var $firstTds = $("#tongji-data #firstLine > td");
        $($firstTds[0]).text(data.totalAll);
        $($firstTds[1]).text(data.apiFailedAll);
        $($firstTds[2]).text(data.businessFailedAll);
        $($firstTds[3]).text(data.businessFailedAllPercent);
        $($firstTds[4]).text(data.apiFailedAllPercent);
		var $secondTds = $("#tongji-data #secondLine > td");
        $($secondTds[0]).text(data.less1000All);
        $($secondTds[1]).text(data.in10005000All);
        $($secondTds[2]).text(data.in500010000All);
        $($secondTds[3]).text(data.in1000015000All);
        $($secondTds[4]).text(data.more15000All);
    }
	function showHighcharts(api,data) {
        $('#high_chart_container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '接口成功率监控'
            },
            subtitle: {
                text: api
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: '次数 (次)'
                },
                min: 0
            },
            tooltip: {
                headerFormat: '<b>{series.name} ({point.y})</b><br>',
                pointFormat: '{point.x:%Y-%m-%e %H:%M}'
            },
            plotOptions: {
                spline: {
                    marker: {
                        enabled: true
                    }
                }
            },
            series: data

        });
    }
	var submit_btn = function(businessType,singleApi){
		if(businessType == "search"){
            getChartsData();
		}
	}
</script>
<%#ajax userTable:{%>
<div class="am-cf am-padding">
	<div class="am-fl am-cf">
		<strong class="am-text-primary am-text-lg">报表中心</strong> / <small>接口成功率监控</small>
	</div>
</div>

<div class="am-g">
	<%include("api_log_query.tpl"){}%>
	<div class="am-u-sm-12 am-u-md-12"
		style="padding: 0 1.6rem 1.6rem 1rem; margin: 0;">
		<div class="am-btn-toolbar" style="padding-left: .5rem;">
			<div class="am-btn-group am-btn-group-xs">
				<div class="am-btn-group am-btn-group-xs am-form-file">

				</div>
			</div>
		</div>
	</div>
</div>

	<div class="am-g">
		<div  style="min-height: 200px;">
			<div class="am-scrollable-horizontal">
				<table id="tongji-data" class="am-table am-table-striped am-table-hover table-main" >
					<tbody>
					<tr>
						<td>调用量</td>
						<td>业务失败量</td>
						<td>接口失败量</td>
						<td>业务失败率(%)</td>
						<td>接口失败率(%)</td>
					</tr>
					<tr id="firstLine">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>1秒内响应次数(占比)</td>
						<td>1-5秒响应次数(占比)</td>
						<td>5-10秒响应次数(占比)</td>
						<td>10-15秒响应次数(占比)</td>
						<td>15秒以上响应次数(占比)</td>
					</tr>
					<tr id="secondLine">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div id="high_chart_container" style="min-width:400px;height:200px;"></div>
	<link rel="stylesheet" href="${base}/template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
    <script type="text/javascript" src="${base}/template/common/js/datetimepicker/amazeui.datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/template/common/js/datetimepicker/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${base}/template/common/js/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="${base}/template/common/js/highcharts/exporting.js"></script>
	<script type="text/javascript" src="${base}/template/common/js/highcharts/highcharts-zh_CN.js"></script>

	<script>
        /*日历控件 begin*/
        var mydatetime = $('.form_datetime').datetimepicker({
          language:  'zh-CN',//语言设置，默认使用英语 'en' ,额外添加amazeui.datetimepicker.zh-CN.js,注意编码格式charset="UTF-8"
          format: 'yyyy-mm-dd hh:ii',//日期格式：接受String,默认为mm/dd/yyyy
          autoclose: true,//日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days(今日) 视图有效)。
          todayBtn: true,//是否显示今日视图
          todayHighlight: true,//是否高亮显示今天的日期
          minuteStep: 1,//设置分钟视图时间间隔数，默认为 5
          pickerPosition: 'bottom-right'//'bottom-right' (默认)、'bottom-left'、'top-right'、'top-left'
        });
        /*日历控件 end*/
		getChartsData();
    </script>
	<%}%> <%}%>